// JavaScript Document
//对应七张图的背景
var bgcolor = ['#4085d2', '#fdeeeb', '#1B4046', '#D7DEE4', '#0AA9E0', '#D8DDE3', '#0C1222']
var nav = document.getElementById("nav");
var pic = document.getElementById("pic");
var box = document.getElementById("box");
var navs = nav.getElementsByTagName("li");
var pics = pic.getElementsByTagName("li");
var timer = null;
pics[0].className = 'nowpic';

for(var i = 0; i < navs.length; ++i) {
	navs[i].index = i;
	navs[i].onmouseover = function() {
		if(timer) clearInterval(timer);
		ini();
		box.style.backgroundColor = bgcolor[this.index];
		pics[this.index].className = "nowpic";
		myOpacity(pics[this.index]);
	}
	navs[i].onmouseout = function() {
		//判断当前运动对象index
		var index = this.index;
		var t = index;
		timer = setInterval(function() {
			if(t == index) Auto(++index);
			else Auto();
		}, 2000);
	}
}

//初始化图片状态
function ini() {
	for(var i = 0; i < pics.length; ++i) {
		pics[i].className = "";
	}
	for(var i = 0; i < navs.length; ++i) {
		navs[i].className = "";
	}
}

//图片加载效果
function myOpacity(_obj3) {
	var i = 0;

	function fade(_obj) {
		i = i + 10;

		_obj.style.opacity = i / 100;
		if(i < 100) {
			setTimeout(function() {
				fade(_obj);
			}, 20);
		}
	}
	fade(_obj3);
}

var k = 0;
//实现自动切换
function Auto(_index) {
	if(_index) k = _index;
	k = k > pics.length - 1 ? 0 : k;
	ini();
	box.style.backgroundColor = bgcolor[k];
	pics[k].className = "nowpic";
	navs[k].className = 'navnow';
	myOpacity(pics[k]);
	k++;

}

timer = setInterval(Auto, 2000);